<template>
    <div>
        <Teleport to="#before-navigation" v-if="targetExists1">
            <CourseContacts />
        </Teleport>

        <div class="tools-box">
            <el-button color="#d24c0e" @click="goPage(`/console/course/${courseId}/unit/create`)" v-if="roleStore.isSuperAdmin">{{ $t('course.index.btn_text_1') }}</el-button>
            <el-button color="#d24c0e" @click="goPage(`/console/course/${courseId}/edit`)" v-if="roleStore.isSuperAdmin">{{ $t('course.index.btn_text_2') }}</el-button>
        </div>
        <RouterLink :to="{ name: 'modForum', query: {courseId: courseId, type: 1 }}" class="instance-name">
            <img src="@/assets/img/class-icon.svg" style="width: 18px" />
            <span>{{ $t('router_tit.modForum') }}</span>
        </RouterLink>
        <RouterLink :to="{ name: 'modForum2', query: {courseId: courseId, type: 2 }}" class="instance-name">
            <img src="@/assets/img/class-icon.svg" style="width: 18px" />
            <span>{{ $t('router_tit.modForum2') }}</span>
        </RouterLink>
        <div class="course-list" v-loading="loading">
            <router-link class="course-item" :to="{ name: 'unitNull', params: { courseId: courseId, unitId: unit.id } }" v-for="unit in unitList" :key="unit.id">
                <div class="course-pic pic">
                    <img :src="unit.icon_url" class="ele" />
                </div>
                <div class="course-tit">
                    <span class="tit">{{ locale === 'zh-hk' ? unit.title_cn : unit.title_en }}</span>
                    <el-icon size="30" color="#298A08" v-if="unit.is_completed"><SuccessFilled /></el-icon>
                </div>
            </router-link>
            <el-empty v-if="!unitList.length" :description="$t('golbal.empty_desc')" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useRoleStore } from '@/stores/role'

import UnitService from '@/api/unit'
import type { UnitItem } from '@/types/unit'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

import CourseContacts from '@/components/CourseContacts.vue'

import CourseService from '@/api/course'
import type { CourseItem } from '@/types/course'

import { goPage } from '@/utils/global'

const route = useRoute()
const roleStore = useRoleStore()
const courseId = computed(() => Number(route.params.courseId))
const targetExists1 = ref(false)
const targetExists2 = ref(false)
const loading = ref(false)
const { locale } = useI18n<{ message: MessageSchema }, SupportedLocales>()

// 单元列表
const unitList = ref<UnitItem[]>([])
function getUnitList() {
    loading.value = true
    UnitService.list(courseId.value)
        .then(res => {
            unitList.value = res
        })
        .finally(() => {
            loading.value = false
        })
}

// 课程信息
const courseInfo = ref<CourseItem>()
function getCourseInfo() {
    CourseService.getById(courseId.value).then(res => {
        courseInfo.value = res
    })
}

onMounted(() => {
    targetExists1.value = !!document.querySelector('#before-navigation')
    targetExists2.value = !!document.querySelector('#after-navigation')
    getUnitList()
    getCourseInfo()
})
</script>

<style lang="less" scoped>
@import '@/assets/styles/variable.less';
.tools-box {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
}

.instance-name {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #e63946;
    font-size: 15px;
    line-height: 30px;
    background-color: transparent;

    &:hover {
        color: #242424;
        background-color: #f9f9f9;
    }
}

.course-list {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    .course-item {
        box-shadow: rgb(189, 189, 189) 2px 4px 5px 0px;
        border-top: 6px solid #00a9ce;
        width: calc(33.33% - 10px);
        cursor: pointer;
        position: relative;
        top: 0;
        transition: top 0.35s ease-in-out;
        @media screen and (max-width: @lPhone) {
            width: calc(50% - 10px);
        }
        &:hover {
            border-top-color: #ed8b00;
            top: -7px;
        }

        .course-pic {
            width: 100%;
            min-height: 190px;
        }

        .course-tit {
            padding-right: 8px;

            position: absolute;
            top: 20px;
            left: 0;
            right: 0;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;

            .tit {
                padding: 4px 7px;
                background-color: rgba(0, 169, 206, 1);
                line-height: 1.5;
                color: #fff;
                font-size: 18px;
            }

            .el-icon {
                border-radius: 50%;
                background-color: #fff;
            }
        }
    }
}
</style>
